<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折线图</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var xAxisData = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
        var yAxisData = [3000,2800,900,1000,800,700,1400,1300,900,1000,800,600];
        var option = {
            title:{
                name: '康师傅销售额',
            },
            xAxis: {
                name: '月份',
                type: 'category',
                data: xAxisData,
                boundaryGap: 'false',
                scale:'true',
            },
            yAxis:{
                name: '销售额',
                type: 'value', 
            },
            series: [{
                name:'康师傅销售额',
                type:'line',
                data: yAxisData,
                smooth: true,
                areaStyle: {
                    color: 'pink',
                },
                lineStyle:{
                    color:'green',
                    width:2,
                    type:'solid',
                },
                stack:{},
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值',
                    },{
                        type: 'min',
                        name: '最小值',
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                },
                markArea: {
                    data: [
                    [{
                        xAxis: '1月',
                    },{
                        xAxis: '2月'
                    }],[{
                        xAxis: '7月',
                    },{
                        xAxis: '8月'
                    }]
                ]},
            }],
        }
        myChart.setOption(option);
    </Script>
</body>
</html>